<div style="font-weight: bold; font-size: 20px; margin-top: 20px">${serialNumber}、热力图分析 </div>
<div style=" text-indent: 2em; font-size: 20px; line-height: 35px; margin-top: 10px; " > 截至当前，本省各区域活力的热力图如下图所示${clHeatMapDesc} </div>
<div id="map" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px" ></div>

<script>
    (function () {
        $(document).ready(function () {
            // 热力图分析
            /*var mapData = [
                { pubArea: "海口", pubCount: 6 },
                { pubArea: "白沙", pubCount: 565 },
                { pubArea: "陵水", pubCount: 44 },
            ];*/
            var mapData = ${heatMapList}
            var labelArr = $.map(mapData, function(n, i){ return n.county  })
            var countArr = $.map(mapData, function(n, i){ return n.count  })
            var outdata = $.map(mapData, function(n, i){
                return {
                    name: n.county,
                    value: n.count
                }
            })
            var option = {
                tooltip: {
                    show: true,
                    formatter: function (params) {
                        if (params.value) {
                            return (
                                "&nbsp;&nbsp;" +
                                params.name +
                                "&nbsp;&nbsp;&nbsp;" +
                                params.value +
                                "&nbsp;&nbsp;"
                            );
                        } else {
                            return (
                                "&nbsp;&nbsp;" +
                                params.name +
                                "&nbsp;&nbsp;&nbsp;0&nbsp;&nbsp;"
                            );
                        }
                    },
                },
                visualMap: {
                    min: ${heatMapListMin},
                    max: ${heatMapListMax},
                    itemWidth: 10,
                    itemHeight: 89,
                    orient: "horizontal",
                    left: "50",
                    top: "0",
                    text: ["密", "疏"],
                    textStyle: {
                        color: "#666666",
                        fontSize: 13,
                    },
                    inRange: {
                        color: [
                            "#FFFFFF",
                            "#ADFF2F",
                            "#ADFF2F",
                            "#FFA500",
                            "#FF4500",
                            "#FF0000",
                        ], //['#D9EEFF', '#2F9BFF'],
                    },
                    outOfRange: {
                        show: false,
                    },
                },
                geo: {
                    map: "hainan",
                    show: true,
                    roam: false,
                    zoom: 1.2,
                    label: {
                        emphasis: {
                            show: false,
                        },
                    },
                    itemStyle: {
                        normal: {
                            show: false,
                        },
                    },
                },
                series: [
                    {
                        type: "map",
                        map: "hainan",
                        aspectScale: 0.75,
                        zoom: 1.2,
                        label: {
                            normal: {
                                formatter: function (para) {
                                    return "{name|" + para.name + "}";
                                },
                                rich: {
                                    cnNum: {
                                        fontSize: 11,
                                        color: "#333333",
                                        align: "center",
                                    },
                                    name: {
                                        fontSize: 10,
                                        color: "#333333",
                                        align: "center",
                                        lineHeight: 20,
                                    },
                                },
                                //formatter: '{b}',
                                color: "#333333",
                                show: true,
                            },
                            emphasis: {
                                show: false,
                            },
                        },
                        itemStyle: {
                            normal: {
                                areaColor: "#D9EEFF",
                                borderColor: "#fff",
                                borderWidth: 1,
                            },
                            emphasis: {
                                areaColor: "#FFAE00",
                            },
                        },
                        data: ${heatMapList},
                        nameMap: {
                            "海口": "海口市",
                            "三亚": "三亚市",
                            "儋州": "儋州市",
                            "五指山": "五指山市",
                            "琼海": "琼海市",
                            "文昌": "文昌市",
                            "万宁": "万宁市",
                            "东方": "东方市",
                            "定安": "定安县",
                            "屯昌": "屯昌县",
                            "澄迈": "澄迈县",
                            "临高": "临高县",
                            "白沙": "白沙黎族自治县",
                            "昌江": "昌江黎族自治县",
                            "乐东": "乐东黎族自治县",
                            "陵水": "陵水黎族自治县",
                            "保亭": "保亭黎族苗族自治县",
                            "琼中": "琼中黎族苗族自治县",
                            "南海诸岛": "三沙市",
                        },
                    },
                ],
            };
            console.log(option)
            var hainanMap = echarts.init(document.getElementById("map"));
            echarts.registerMap("hainan", hainan);
            hainanMap.setOption(option);
        })
    })()
</script>